<template>
  <div class="player-wrapper">
    <aplayer :key="aplayer.src" :autoplay="true" :music="aplayer"></aplayer>
  </div>
</template>
<script>
import aplayer from 'vue-aplayer'
import { getMusicUrl } from '@/api/play'
import { getSongsDetail } from '@/api/search'
export default {
  name: 'miusc-player',
  components: { aplayer },
  data () {
    return {
      // player属性
      aplayer: {
        src: '1',
        artist: '多田葵 (ただ あおい)',
        title: 'theme of SSS',
        pic:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1616470779,797526771&fm=26&gp=0.jpg',
        id: 1
      }
    }
  },
  methods: {
    getSongUrl (id) {
      getMusicUrl({ id: id }).then(res => {
        if (res.data[0].url) {
          this.aplayer.src = res.data[0].url
        } else {
          this.$message({
            message: '该歌曲为vip',
            offset: 100,
            type: 'error'
          })
          this.$setSongId(1)
          this.aplayer = {
            src: '1',
            artist: '多田葵 (ただ あおい)',
            title: 'theme of SSS',
            pic:
              'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1616470779,797526771&fm=26&gp=0.jpg',
            id: 1
          }
        }
      })
      getSongsDetail({ ids: id }).then(res => {
        const _props = res.songs[0]
        this.aplayer.artist = _props.ar
          .map(item => {
            return item.name
          })
          .join(' / ')
        this.aplayer.title = _props.name
        this.aplayer.pic = _props.al.picUrl
      })
    }
  },
  computed: {},
  watch: {
    '$store.state.songId' (newVal) {
      if (newVal !== 1) {
        this.getSongUrl(newVal)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.player-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  .aplayer {
    margin: 0;
    .aplayer-title {
      margin-right: 15px;
    }
  }
}
</style>
